<template>
  <label class="g-radio">
    <span class="g-radio-input"
      :class="{
        'is-disabled': disabled,
        'is-checked': model === label,
        'is-focus': focus
      }"
    >
      <span class="g-radio-inner"></span>
      <input
        class="g-radio-original"
        :value="label"
        type="radio"
        v-model="model"
        @focus="focus = true"
        @blur="focus = false"
        :name="name"
        :disabled="disabled">
    </span>
    <span class="g-radio-label">
      <slot></slot>
    </span>
  </label>
</template>

<script >
    
import Emitter from '@/utils/mixins/emitter';

export default {
    name: 'GRadio',

    mixins: [Emitter],

    props: {
        value: {},
        label: {},
        disabled: Boolean,
        name: String
    },

    data() {
        return {
            focus: false
        };
    },

    computed: {

        model: {
            get() {
                return this.value;
            },

            set(val) {
                this.$emit('input', val);
            }
        }
    },

    watch: {
        label : {

            handler: function (newValue, oldValue) {

                if (this.model === oldValue) {
                    this.model = newValue;
                }
                
            },
            deep: true

        }
    }
}; 
</script>

<style lang="scss" scoped>

//on the basis of elementui

.g-radio{
    font-size: 13px
}

.g-radio,.g-radio-input {
    white-space: nowrap;
    line-height: 1;
    outline: 0
}

.g-radio,.g-radio-inner,.g-radio-input {
    position: relative;
    display: inline-block
}

.g-radio {
    color: #606266;
    font-weight: 500;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none
}

.g-radio-input {
    cursor: pointer;
    vertical-align: middle
}
.g-radio.is-disabled {
    cursor: not-allowed;
    border-color: #ebeef5
}

.g-radio-input.is-disabled .g-radio-inner,.g-radio-input.is-disabled.is-checked .g-radio-inner {
    background-color: #f5f7fa;
    border-color: #e4e7ed
}
.g-radio-input.is-disabled .g-radio-inner {
    cursor: not-allowed
}

.g-radio-input.is-disabled .g-radio-inner::after {
    cursor: not-allowed;
    background-color: #f5f7fa
}

.g-radio-input.is-disabled .g-radio-inner+.g-radio-label {
    cursor: not-allowed
}

.g-radio-input.is-disabled.is-checked .g-radio-inner::after {
    background-color: #c0c4cc
}

.g-radio-input.is-disabled+span.g-radio-label {
    color: #c0c4cc;
    cursor: not-allowed
}

.g-radio-input.is-checked .g-radio-inner {
    border-color: #409EFF;
    background: #409EFF
}

.g-radio-input.is-checked .g-radio-inner::after {
    -webkit-transform: translate(-50%,-50%) scale(1);
    transform: translate(-50%,-50%) scale(1)
}

.g-radio-input.is-focus .g-radio-inner {
    border-color: #409EFF
}

.g-radio-inner {
    border: 1px solid #dcdfe6;
    border-radius: 100%;
    width: 14px;
    height: 14px;
    background-color: #fff;
    cursor: pointer;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.g-radio-inner:hover {
    border-color: #409EFF
}

.g-radio-inner::after {
    width: 4px;
    height: 4px;
    border-radius: 100%;
    background-color: #fff;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%) scale(0);
    transform: translate(-50%,-50%) scale(0);
    -webkit-transition: -webkit-transform .15s cubic-bezier(.71,-.46,.88,.6);
    transition: -webkit-transform .15s cubic-bezier(.71,-.46,.88,.6);
    transition: transform .15s cubic-bezier(.71,-.46,.88,.6);
    transition: transform .15s cubic-bezier(.71,-.46,.88,.6),-webkit-transform .15s cubic-bezier(.71,-.46,.88,.6)
}

.g-radio-original {
    opacity: 0;
    outline: 0;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0
}

.g-radio:focus:not(.is-focus):not(:active) .g-radio-inner {
    -webkit-box-shadow: 0 0 2px 2px #409EFF;
    box-shadow: 0 0 2px 2px #409EFF
}

.g-radio-label {
    font-size: 12px;
    padding-left: 4px
}
</style>